<template>
  <el-dialog
    :model-value="show"
    title="FB广告代理商编辑"
    width="800px"
    append-to-body
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    destroy-on-close
  >
    <div class="form-title">基础信息</div>
    <el-form
      ref="ruleFormRef"
      :model="detailForm"
      :rules="rules"
      label-width="90px"
      class="form-box"
    >
      <el-form-item label="代理商ID：" prop="id">
        <span>{{ detailForm.id || DEFAULT_TEXT }}</span>
      </el-form-item>
      <el-form-item label="代理商：" prop="name">
        <el-input
          v-model="detailForm.name"
          placeholder="请输入代理商"
          maxlength="100"
        />
      </el-form-item>
      <el-form-item label="更新人：" prop="updater_id">
        <span>
          {{
            userStore().userMap[detailForm.updater_id]?.label || DEFAULT_TEXT
          }}
        </span>
      </el-form-item>
      <el-form-item label="更新时间：" prop="updated_at">
        <span>{{ FORMAT_DATE(detailForm.updated_at) }}</span>
      </el-form-item>
    </el-form>
    <div class="form-title">权限设置</div>
    <RoleConfig
      :visble_companies="detailForm.visible_companies"
      @changeRole="changeRoleConfig"
    />
    <template #footer>
      <el-button
        type="primary"
        :loading="loading"
        :disabled="!show"
        @click="submitApply"
      >
        提交
      </el-button>
      <el-button type="info" @click="handleClose">取消</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { DEFAULT_TEXT, FORMAT_DATE } from '@/utils/const';
import RoleConfig from '@/components/RoleConfig';
import { platformDatadictionaryUpdate } from '@/api/system';
import userStore from '@/store/modules/user';
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  activeRow: {
    type: Object,
    default: () => {}
  },
  activeType: {
    type: [String, Number],
    default: ''
  }
});
const emit = defineEmits();

const detailForm = ref({});

const rules = reactive({
  name: {
    required: true,
    message: '请输入代理商',
    trigger: 'change'
  }
});

function changeRoleConfig({ visibleList }) {
  detailForm.value.company_ids = visibleList || [];
}

// 关闭
function handleClose() {
  emit('update:show', false);
}

// 提交
const loading = ref(false);
const ruleFormRef = ref();
async function submitApply() {
  try {
    await ruleFormRef.value.validate();
    loading.value = true;
    platformDatadictionaryUpdate({
      visible_companies: detailForm.value.company_ids || [],
      id: detailForm.value.id,
      name: detailForm.value.name,
      type: props.activeType
    })
      .then(() => {
        $msg.success('FB广告代理商编辑成功');
        handleClose();
        emit('getTable');
      })
      .finally(() => {
        loading.value = false;
      });
  } catch {
    console.log('数据字典管理-FB广告代理商-编辑-表单提交校验未通过');
  }
}

// 初始化表单
watch(
  () => props.show,
  val => {
    if (!val) return;
    // 赋默认值
    detailForm.value = JSON.parse(JSON.stringify(props.activeRow));
    detailForm.value.company_ids = detailForm.value.visible_companies || [];
  }
);
</script>

<style lang="scss" scoped></style>
